<template>
  <div class="table-box">
    <ProTable ref="proRef" :request-api="getAllFeedback" :columns="columns">
      <template #expand="{ row }">
        <div class="p-30px">{{ row.cont }}</div>
      </template>
      <template #status="{ row }">
        <el-tag type="success" v-show="row.status === 1">已处理</el-tag>
        <el-tag type="danger" v-show="row.status === 2">未处理</el-tag>
      </template>
      <template #opera="{ row }">
        <el-button link :icon="Coordinate" v-if="row.status === 2" @click="opera(row)">处理</el-button>
        <el-button link :icon="Coordinate" v-if="row.status === 1" :disabled="true">已处理</el-button>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { ref } from "vue";
import { getAllFeedback, operaFeedback } from "@/api/modules/feedback";
import { ColumnProps } from "@/components/ProTable/interface";
import { Coordinate } from "@element-plus/icons-vue";
import { useHandleData } from "@/hooks/useHandleData";

const proRef = ref<InstanceType<typeof ProTable> | null>();

const columns: ColumnProps[] = [
  { type: "expand" },
  { prop: "realName", label: "提交人" },
  { prop: "belongName", label: "所属区域" },
  { prop: "status", label: "处理状态" },
  { prop: "opera", label: "操作" }
];

const opera = async (row: any) => {
  await useHandleData(operaFeedback, { id: row.id, status: 1 }, "处理该反馈");
  proRef.value?.getTableList();
};
</script>

<style></style>
